<!--
 * @Description:证书组件
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-22 15:10:00
 * @LastEditors: Wang Xi
 * @LastEditTime: 2023-5-22 18:41:00
-->
<template>
	<view class="certificate-container">
		<view class="certificate-box has-background-image">

			<view class="icon center">
				<imageForSize size="80" radius="23" :src="logo">
				</imageForSize>
			</view>
			<view class="shop-name center">
				BIG SHOP
			</view>
			<view class="shop-des center">
				OPERATION LICENSE
			</view>
			<view class="shop-info-text">
				<p v-for="item in infoList" :key="item.id">
					<text>{{item.key+':'}}</text>
					<text>{{ item.val}}</text>
				</p>
			</view>
			<view class="shop-des-text">
				<p v-for="item in desList" :key="item">{{item}}</p>
			</view>
			<view class="other-info-text">
				<p>ISSUER'S SIGNATURE</p>
				<p>ISSUE TIME</p>
			</view>
			<view class="background-image">

			</view>
			<view class="border">

			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "certificate",
		props: {
			// 信息列表
			infoList: {
				default: () => [{
					key: 'DEAR',
					val: 'WangXi',
					id: '1'
				}, {
					key: 'GLOBAL COMMUNITY PARTNER NUMBER',
					val: 'NO:00120200',
					id: '2'
				}, {
					key: 'STORE TYPE',
					val: 'B',
					id: '3'
				}, {
					key: 'BUSINESS CATEGORY',
					val: 'Knitwear,Metal,Computer Software',
					id: '4'
				}, {
					key: 'BATCH NO',
					val: 'BN-100C',
					id: '5'
				}],
			},
			// 
			desList: {
				default: () => ['CONGRATULATIONS, YOU HAVE BECOME A GLOBAL PARTNER OF BIGSHOP',
					'YOU WILL ENJOY THE HUGE BENEFITS BROUGHT BY BIGSHOP, THANK YOU FOR YOUR PARTICIPATION AND SUPPORT.',
					'BIGSHOP WILL EXPLORE THE WEALTH OF LIVE E-COMMERCE WITH YOU. BIGSHOPS',
					'THE EXCLUSIVE MODE WILL PROVIDE YOU WITH THE MOST CONVENIENT PROMOTION CHANNEL TOEXPAND SALES'
				],
				type: Array

			},
			otherInfo: {
				default: () => ({
					time: '2022-10-02 12:00:00',
					signature: ''
				})
			},
			// 店铺logo
			logo: {
				default: require('@/static/images/certificate-icon.png'),
				type: String
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.certificate-container {
		.certificate-box {
			position: relative;
			padding: 115rpx 95rpx 105rpx;
			// height: 835rpx;

			.background-image {
				background-image: url('@/static/images/certificate-bg.png');
				background-repeat: no-repeat;
				background-size: cover;
				background-size: 100% 100%;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			>.center {
				display: flex;
				justify-content: center;
			}

			.shop-name {
				color: #000;
				font-weight: 700;
				font-size: 50rpx;
			}

			.shop-des {
				color: #000;
				font-weight: bold;
				margin-top: 15rpx;
			}

			.shop-info-text {
				margin-top: 20rpx;
				font-size: 12rpx;
				line-height: 1.15;
				padding-bottom: 10rpx;
				border-bottom: 2rpx solid #849391;

				>p {
					margin: 8rpx 0;
				}
			}

			.shop-des-text {
				padding-top: 10rpx;
				font-size: 10rpx;

				>p {
					margin: 8rpx 0;
					line-height: 1.15;
				}
			}

			.other-info-text {
				padding-top: 10rpx;
				line-height: 45rpx;
				font-size: 14rpx;
				color: #35504C;
			}

			// >.border {
			// 	width: 100%;
			// 	height: 100%;
			// 	background-image: url('https://picnew13.photophoto.cn/20190315/jingmeideoushibiankuangchahua-32436010_1.jpg');
			// 	background-repeat: no-repeat;
			// 	background-size: 100% 100%;
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0;
			// 	z-index: 1;
			// }
		}
	}
</style>
